<template>
  <div class="car-item" @mouseenter="enterCarItem" @mouseleave="leaveCarItem">
    <img :src="'http://150.158.212.186:3001' + pGoods.src" alt="">
    <span class="title">【{{pGoods.name}}】---{{pGoods.describe}}</span>
    <span class="goods-price">￥{{pGoods.goods_price}}</span>
<!--    <span class="goods_price-and-count">￥{{pGoods.goods_price * pGoods.goods_count}}</span>-->
    <button @click="subClick">-</button>
    <input type="text" disabled :value="pGoods.goods_count">
    <button @click="addClick">+</button>

    <div class="trash" v-if="trashShow" @click="trashClick"><img src="~assets/img/trash.svg" alt="移除商品"></div>
    <CheckButton  @click.native="checkBtnClick"
                  class="check-goods-button"
                  :value="pGoods.checked"
                  :is-check="pGoods.check"></CheckButton>
  </div>
</template>

<script>
  import CheckButton from "components/content/check_button/CheckButton";

  import {getGoodsList} from 'network/mix'

  export default {
    name: "CarListItem",
    props: {
      pGoods: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    components: {
      CheckButton,
    },
    data() {
      return {
        trashShow: false, // 是否显示移除购物车
      }
    },
    mounted() {
      this.mGetGoodsList(this.pGoods.id)
    },
    methods: {
      enterCarItem() { // 鼠标进入此商品
        this.trashShow = true
      },
      leaveCarItem() { // 鼠标离开此商品
        this.trashShow = false
      },
      trashClick() { // 点击删除此商品按钮
        this.$store.dispatch('aDestroyCarToCarOfGoods', this.pGoods) // 将此商品从购物车移除
      },
      checkBtnClick () { // 选中按钮
        this.pGoods.check = !this.pGoods.check
      },
      subClick() { // 减少按钮
        this.pGoods.goods_count--
        if (this.pGoods.goods_count <= 0) { // 如果该商品的数量小于等于0
          this.$store.dispatch('aDestroyCarToCarOfGoods', this.pGoods) // 将此商品从购物车移除
        }
      },
      addClick() { // 添加按钮
        if (this.pGoods.goods_count < this.pGoods.goods_store) {
          this.pGoods.goods_count++
        } else {
          this.$err_ty_toast.toShow('购买的数量大于库存！！！', 2000)
        }
      },

      mGetGoodsList(id) { // 通过id获取商品信息
        getGoodsList(id, 0, 0, '', '', 0)
          .then(res => {
            // console.log('pGoods=');
            // console.log(res.page.list[0]);
            this.pGoods.goods_store = res.page.list[0].store // 网络请求获取当前商品的库存添加到vuex仓库
            // console.log(this.pGoods);
          })
      },
    }
  }
</script>

<style scoped>
  .car-item {
    position: relative;
    border: 1px solid red;
    height: 160px;
  }
  .car-item img {
    width: 150px;
    height: 150px;
  }
  .car-item input {
    width: 30px;
    text-align: center;
  }
  .car-item .title {
    position: absolute;
    width: 80%;
    top: 20px;

    /*background-color: yellow;*/
  }
  .car-item .goods-price {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: red;
  }
  .trash {
    position: absolute;
    height: 80px;
    width: 30px;

    right: 0;
    top: 40px;

    /*background-color: red;*/
  }
  .trash img {
    width: 100%;
    height: 100%;
  }
  .trash:hover {
    cursor: pointer;
    background-color: #e2e2e2;
  }
  .check-goods-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-radius: 50%;
  }
  .check-goods-button:hover {
    cursor: pointer;
  }
  button:hover {
    cursor: pointer;
  }
</style>